<!--
 * @Description: 试题预览
 * @Author: yue
 * @Date: 2022-09-17 11:42:40
 * @LastEditors: yue
 * @LastEditTime: 2022-09-20 18:39:21
-->

<template>
  <div class="container">
    <el-dialog :visible="showDialog" title="题目预览" @close="btnCancel">
      <!-- NOTE：题目信息 -->
      <!-- TODO：数据铺设 -->
      <el-row style="margin-bottom: 20px">
        <el-col :span="6">
          <span>【题型】：</span>
          <span>{{ questionType }}</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】：</span>
          <span>{{ questionDetail.id }}</span>
        </el-col>
        <el-col :span="6">
          <span>【难度】：</span>
          <span>{{ difficulty }}</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】：</span>
          <span>{{ questionDetail.tags }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span>【学科】：</span>
          <span>{{ questionDetail.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】：</span>
          <span>{{ questionDetail.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】：</span>
          <span>{{ questionDetail.direction }}</span>
        </el-col>
      </el-row>

      <div class="border"></div>

      <!-- NOTE：题干 -->
      <div>【题干】：</div>

      <div style="color: blue" v-html="questionDetail.question"></div>

      <!-- NOTE：单选 -->
      <el-row v-if="questionDetail.questionType === '1'">
        <div>单选题 选项：（以下选中的选项为正确答案）</div>
        <div
          v-for="item in questionDetail.options"
          :key="item.id"
          style="margin: 10px 0"
        >
          <el-radio v-model="radio" :label="item.isRight" :disabled="true">
            {{ item.title }}
          </el-radio>
        </div>
      </el-row>

      <!-- NOTE：多选 -->
      <el-row v-if="questionDetail.questionType === '2'">
        <div>多选题 选项：（以下选中的选项为正确答案）</div>
        <div
          v-for="item in questionDetail.options"
          :key="item.id"
          style="margin: 10px 0"
        >
          <el-checkbox :checked="Boolean(item.isRight)" :disabled="true">
            {{ item.title }}
          </el-checkbox>
        </div>
      </el-row>

      <div class="border"></div>

      <!-- NOTE：参考答案 -->
      <el-row class="border">
        <span>【参考答案】：</span>
        <el-button type="danger" @click="showVideo = true">
          视频答案预览
        </el-button>
        <div>
          <video
            v-show="showVideo"
            :src="questionDetail.videoURL"
            width="300"
            height="200"
            controls
          ></video>
        </div>
      </el-row>

      <!-- NOTE：答案解析 -->
      <el-row class="border" type="flex" justify="start" align="middle">
        <span>【答案解析】：</span>
        <span v-html="questionDetail.answer"></span>
      </el-row>

      <!-- NOTE：题目备注 -->
      <el-row>
        <span>【题目备注】：</span>
        <span>{{ questionDetail.remarks }}</span>
      </el-row>

      <!-- NOTE：按钮 -->
      <template v-slot:footer>
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="btnCancel">关闭</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants.js'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    questionDetail: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      radio: 1,
      showVideo: false,
      questionType: null,
      difficulty: null
    }
  },
  watch: {
    questionDetail() {
      this.questionType = questionType.filter(
        (item) => item.value + '' === this.questionDetail.questionType
      )[0].label
      this.difficulty = difficulty.filter(
        (item) => item.value + '' === this.questionDetail.difficulty
      )[0].label
    }
  },
  methods: {
    btnCancel() {
      this.showVideo = false
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped lang="scss">
.border {
  width: 100%;
  margin: 20px 0 10px;
  border-bottom: 1px solid #222;
}

::v-deep .el-radio__input {
  cursor: pointer;
  background-color: #fff !important;
  .el-radio__inner {
    background-color: #fff !important;
    cursor: pointer;

    &::after {
      background-color: #fff;
      cursor: pointer;
    }
  }
  &.is-checked {
    color: #fff;
    .el-radio__inner {
      border-color: #409eff !important;
      background: #409eff !important;
      &::after {
        background-color: #fff;
      }
    }
  }
}

::v-deep .el-radio__label {
  cursor: pointer !important;
  color: #606266 !important;
}

::v-deep .el-checkbox__inner {
  background-color: #fff !important;
}
::v-deep .el-checkbox__input {
  &.is-checked .el-checkbox__inner {
    background-color: #409eff !important;
    border-color: #409eff;
    &::after {
      background-color: #fff !important;
    }
  }
}
::v-deep .el-checkbox__label {
  color: #606266 !important;
}
</style>
